<template>
  <el-tree
      ref="treeRef"
      :props="treeProps"
      :check-strictly="false"
      :data="apiTree"
      node-key="id"
      show-checkbox
      :check-on-click-node="true"
      default-expand-all
      :expand-on-click-node="false"
      :default-checked-keys="checkedKeys"
      @check-change="checkChange"
  />
  <el-divider/>
  <el-button plain @click="handleClose">取消</el-button>
  <el-button type="primary" plain @click="handleSubmit">确定</el-button>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from "vue";
// import useApiStore from "@/store/api";
import {RoleApiDistributeR, RoleApiListR} from "@/api/role";
import {ElMessage, ElTree} from "element-plus";
import {RoleApisListRequest, RoleApisRequest} from "@/interface/role";
import {Api} from "@/interface/api";
import {ApisR} from "@/api/api";
import {LoadApiTree} from "@/utils/api";
import {TreeKey} from "element-plus/es/components/tree/src/tree.type";

// const apiStore = useApiStore()

const treeProps = {
  label: 'name',
  children: 'children',
  ifLeaf: '!!children'
}

const props = defineProps({
  role_id: {
    type: Number,
    default: 0
  }
})

const visible = ref<boolean>(true)
const checkedKeys = ref<number[]>([])

const treeRef = ref<InstanceType<typeof ElTree>>()
//API 列表
const apis = ref<Api[]>([])
//API 树
const apiTree = ref<Api[]>([])


//查询API 列表
const getApisTree = () => {
  ApisR().then(res=>res.data).then(res => {
    switch (res.code) {
      case 200:
        //API 列表=>API 树
        let list = res.data as Api[]
        let parents = list.filter((m) => m.parent_id === 0)
        let children = list.filter((m) => m.parent_id !== 0)
        LoadApiTree(parents, children)
        apiTree.value = parents

        // apiTree.value = res.data as Api[]
        apis.value = res.data as Api[]
        break
      default:
        // ElMessage.error(res.msg)
    }
  })
}

//查询角色的API 列表
const getRoleApiList = () => {
  console.log('查询角色', props.role_id, '的API 列表')
  if (props.role_id < 1) {
    return
  }
  let req = <RoleApisListRequest>({id:props.role_id})

  RoleApiListR(req).then(res => res.data).then(res => {
    switch (res.code) {
      case 200:
        checkedKeys.value = res.data as number[]
        break
      default:
        // ElMessage.error(res.msg)
    }
  })
}

const emit = defineEmits(['close'])
//取消
const handleClose = () => {
  emit('close')
}

//节点勾选，则勾选它的父节点
const checkChange = (key:Api, checked:boolean, deep:boolean) => {
  //只选叶子节点的值
  // checkedKeys.value = treeRef.value!.getCheckedKeys(false) as number[]
  // console.log('当前选中节点：', JSON.stringify(checkedKeys.value))
}

//提交
const handleSubmit = () => {
  //只选叶子节点的值
  checkedKeys.value = treeRef.value!.getCheckedKeys(false) as number[]
  console.log('叶子节点：', JSON.stringify(checkedKeys.value))
  //只选父节点的值
  let keys = treeRef.value!.getHalfCheckedKeys() as number[]
  console.log('父节点：', JSON.stringify(keys))
  checkedKeys.value.push(...keys)
  console.log('当前选中节点：', JSON.stringify(checkedKeys.value))

  let req = <RoleApisRequest>{role_id: props.role_id, apis_id: checkedKeys.value}
  console.log(checkedKeys.value)
  RoleApiDistributeR(req).then(res => res.data).then(res => {
    switch (res.code) {
      case 200:
        ElMessage.success(res.msg)
        handleClose()
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    ElMessage.error(err.toString())
  })
}

onMounted(() => {
  getApisTree()
  getRoleApiList()
})
</script>

<style scoped>

</style>